
{%- if section.settings.desktop_image != blank -%}
{%- style -%}
  .banner-{{ section.id }} .adapt-to-image::before {
    padding-bottom: {{ 1 | divided_by: section.settings.desktop_image.aspect_ratio | times: 100 }}%;
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
  }
  @media screen and (max-width: 767px) {
    .banner-{{ section.id }} .adapt-to-image::before {
      padding-bottom: {{ 1 | divided_by: section.settings.mobile_image.aspect_ratio | times: 100 }}%;
    }
  }
  {% comment %}桌面端为模块高度设置一个最小值，为图片高度的 2/3 {% endcomment %}
  @media screen and (min-width: 768px) {
    .banner-{{ section.id }} .adapt-to-image {
      min-height: {{ 1920 | divided_by: section.settings.desktop_image.aspect_ratio | times: 2 | divided_by: 3 }}px;
    }
  }
{%- endstyle -%}
{%- endif -%}

{% assign mobile_image_display_height = 375 | divided_by: section.settings.mobile_image.aspect_ratio %}

{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.text_alignment
    when 'left'
      assign text_alignment = 'text-start'
    when 'center'
      assign text_alignment = 'text-center'
  endcase  
%}

{%- liquid
  if section.settings.show_image
    case section.settings.image_height
      when 'small'
        assign image_height = 'h-4'
      when 'medium'
        assign image_height = 'h-7'
      when 'large'
        assign image_height = 'h-10'
      when 'adapt_to_image'
        assign image_height = 'adapt-to-image'
    endcase
  endif
%}

{%- liquid
  assign showQuickLinks = false
  if section.settings.quick_button_menu != blank and linklists[section.settings.quick_button_menu].links.size > 0
    assign showQuickLinks = true
  endif
%}
{% assign overlay_opacity = section.settings.overlay_opacity | plus: -100 | abs | append: '%' %}

<div class="banner-{{ section.id }} {{ background_color }} {% unless section.settings.show_image %} {% if show_padding %}py-section{% else %}my-section{% endif %}{% endunless %}">
  <div class="container-topic px-0 position-relative">
    {%- if section.settings.show_image -%}
    <div class="absolute-center bg-gray-300">
      <div class="img-wrapper h-100 rigid-wrapper {% if overlay_opacity != '100%' %}bg-black{% endif -%}">
        <picture >
          {% if section.settings.mobile_image != blank %}
            <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px" 
              srcset="{{ section.settings.mobile_image | img_url: '375x' }} 1x, 
              {{ section.settings.mobile_image | img_url: '375x', scale: 2 }} 2x,
              {{ section.settings.mobile_image | img_url: '375x', scale: 3 }} 3x">
          {% endif %}
          {% if section.settings.desktop_image != blank %}
            <img class="object-fit-cover" style="{{ 'opacity:' | append: overlay_opacity }}"
              srcset="{%- if section.settings.desktop_image.width >= 1200 -%}{{ section.settings.desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 1920 -%}{{ section.settings.desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 2400 -%}{{ section.settings.desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                {%- if section.settings.desktop_image.width >= 3840 -%}{{ section.settings.desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
              src="{{ section.settings.desktop_image | img_url: '750x' }}"
              loading="lazy"
              alt="{{ section.settings.desktop_image.alt | escape }}" >
          {% elsif section.settings.mobile_image != blank %}
              <img class="object-fit-cover" style="{{ 'opacity:' | append: overlay_opacity }}"
              srcset="{%- if section.settings.mobile_image.width >= 414 -%}{{ section.settings.mobile_image | img_url: '414x' }} 414w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 600 -%}{{ section.settings.mobile_image | img_url: '600x' }} 600w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 828 -%}{{ section.settings.mobile_image | img_url: '828x' }} 828w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 1000 -%}{{ section.settings.mobile_image | img_url: '1000x' }} 1000w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 1200 -%}{{ section.settings.mobile_image | img_url: '1780x' }} 1200w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 2400 -%}{{ section.settings.mobile_image | img_url: '2000x' }} 2400w,{%- endif -%}
                {%- if section.settings.mobile_image.width >= 3840 -%}{{ section.settings.mobile_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                src="{{ section.settings.mobile_image | img_url: '750x' }}"
                loading="lazy"
                alt="{{ section.settings.mobile_image.alt | escape }}" >
          {% endif %}
          {% if section.settings.desktop_image == blank and section.settings.mobile_image == blank %} 
            <div class="object-fit-cover img-placeholder h-100">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
            </div>
          {% endif %}
        </picture>
      </div>
    </div>
    {%- endif -%}
    <div class="{{ image_height }} position-relative d-flex" {%- if section.settings.show_image -%}{% unless section.settings.image_height == 'adapt_to_image' %}style="min-height: {{ mobile_image_display_height }}px;"{% endunless %}{%- endif -%}>
      <div class="container {% if section.settings.show_image %}my-section{% endif %}">
        <div class="h-100 row align-items-center justify-content-center">    
          <div class="col col-md-12">
            <div class="mt-n2 text-center {{ text_color }}">
              <div class="hero-text-shadow-overlay-{{ section.id }} text-content mw-text-5 mx-auto {{ text_alignment }}">
                {%- for block in section.blocks -%}
                  {%- case block.type -%}
                    {%- when 'heading' -%}
                      {%- if block.settings.heading != empty -%}
                        <h1 class="display-5 mt-2 mb-0 fw-bold">{{ block.settings.heading }}</h1>
                      {%- endif -%}
                    {%- when 'text' -%}
                      {%- if block.settings.text != blank -%}
                        <div class="lead mt-2 no-last-margin richtext-with-link {{ richtext_link_style }}">
                          {{ block.settings.text }}
                        </div>
                      {%- endif -%}
                  {%- endcase -%}
                {%- endfor -%}

                <div class="text-start search-banner-form mt-5">
                  {% render 'predictive-search-form', 
                    showQuickLinks: showQuickLinks, 
                    show_overlay: true,
                    search_types: 'article,product,page',
                    position: "support" %}
                </div>

                {% if section.settings.quick_button_menu != blank and linklists[section.settings.quick_button_menu].links.size > 0 %}
                  <div class="search-quick-link mt-2 mx-n1 d-flex flex-wrap justify-content-center align-items-center">
                    {% for link in linklists[section.settings.quick_button_menu].links %}
                      <a target="_blank" rel="noopener nofollow" class="btn btn-sm btn-outline-gray fw-normal mx-1 mt-2" href="{{ link.url }}">{{ link.title }}</a>
                    {% endfor %}
                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% schema %}
  {
    "name": "Search Banner",
    "class": "search-banner",
    "tag": "section",
    "settings": [
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "checkbox",
        "id": "show_image",
        "label": "Show image",
        "default": true
      },
      {
        "label": "Desktop Image",
        "type": "image_picker",
        "id": "desktop_image"
      },
      {
        "label": "Mobile Image",
        "type": "image_picker",
        "id": "mobile_image"
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          },
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "select",
        "id": "overlay_opacity",
        "label": "Overlay opacity",
        "options": [
          {
            "value": "0",
            "label": "None"
          },
          {
            "value": "16",
            "label": "light"
          },
          {
            "value": "32",
            "label": "Dark"
          }
        ],
        "default": "0"
      },
      {
        "type": "select",
        "id": "text_alignment",
        "label": "Text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "center"
      },
      {
        "type": "link_list",
        "label": "Quick button menu",
        "id": "quick_button_menu"
      }
    ],
    "blocks": [
      {
        "type": "heading",
        "name": "Heading",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "How can we help?",
            "label": "Heading"
          }
        ]
      },
      {
        "type": "text",
        "name": "Description",
        "limit": 1,
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "label": "Description",
            "default": "<p>Description</p>"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Search Banner",
        "blocks": [
          {
            "type": "heading"
          },
          {
            "type": "text"
          }
        ]
      }
    ]
  }
{% endschema %}